<template>
    <div class="top w">
        <div class="l" v-if="topInfo != null">
            <div
            @click="newTopData(item.id, item.name)"
            :key="index"
            :class="currentTopInfo == item.name ? 'l-item-current' : ''"
            v-for="(item, index) in topInfo"
            class="l-item">{{item.name}}</div>
        </div>
        <div class="r">
            <span class="topname">{{currentTopInfo}}</span>
            <div class="option">
                <span @click="playSongListAll" class="option-item">
                    <i class="iconfont">&#xe682;</i>
                    播放全部
                </span>
                <span @click="addPlayList" class="option-item">
                    <i class="iconfont">&#xe64e;</i>
                    添加到队列
                </span>
            </div>

            <div class="topzy">
                <span></span>
                <span>歌曲</span>
                <span>歌手</span>
                <span>时长</span>
            </div>

            <div class="top-list" v-if="topData != null">
                <div
                :key="index"
                v-for="(item, index) in topData"
                class="list-item">
                    <span class="number">{{index + 1}}</span>
                    <span class="name">
                        <div class="pic">
                            <div @click="playSong(item.id)" class="mask">
                                <i class="iconfont">&#xe682;</i>
                            </div>
                            <img :src="item.al.picUrl">
                        </div>
                        <span>{{item.name}}</span>
                    </span>
                    <span @click="jumpSinger(item.ar[0].id)" class="song">{{item.ar[0].name}}</span>
                    <span class="time">{{item.dt | songTimer}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 排行榜摘要
            topInfo: null,
            // 当前所在榜单
            currentTopInfo: '',
            // 当前所在榜单ID
            currentTopInfoID: 19723756,
            // 榜单数据
            topData: null
        }
    },
    mounted() {
        this.getTopInfo();
    },
    filters: {
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    },
    methods: {
        // 获取排行榜摘要
        async getTopInfo() {
            let { data: res } = await this.$http.get('/toplist/detail');
            this.topInfo = res.list;
            this.currentTopInfo = this.topInfo[0].name;
            this.currentTopInfoID = this.topInfo[0].id;
            this.$nextTick(() => {
                this.getTopData(this.currentTopInfoID);
            })
        },
        // 获取榜单数据
        async getTopData(id) {
            this.topData = null;
            let { data: res } = await this.$http.get('/top/list', { params: { id } });
            this.topData = res.playlist.tracks;
        },
        // 切换榜单数据
        async newTopData(id, name) {
            this.getTopData(id);
            this.currentTopInfo = name;
        },
        // 播放全部
        playSongListAll() {
            this.$emit('playSongAll', this.topData);
        },
        // 添加到播放队列
        addPlayList() {
            this.$emit('addPlayList', this.topData);
        },
        // 播放单曲
        playSong(item) {
            this.$emit('playSong', item);
        },
        // 跳转到歌手页面
        async jumpSinger(id) {
            this.$router.push(`/singer/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding-top: 100px;
    .l {
        width: 200px;
        margin-right: 30px;
        border: 1px solid #ccc;
        padding: 18px 0;
        .l-item {
            height: 38px;
            line-height: 38px;
            font-size: 16px;
            cursor: pointer;
            padding: 0 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover {
                color: #3ec481;
            }
        }
    }
    .r {
        flex: 1;
        padding-top: 24px;
        .topname {
            font-size: 20px;
            font-weight: 700;
        }
        .option {
            margin-top: 20px;
            .option-item {
                cursor: pointer;
                display: inline-block;
                padding: 0 20px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                border: 1px solid #ccc;
                background: #f8f8f8;
                border-radius: 2px;
                margin-right: 12px;
                &:hover {
                    background-color: #ededed;
                }
                &:nth-child(1) {
                    background: #3ec481;
                    color: #fff;
                    &:hover {
                        background-color: #37b174;
                    }
                }
            }
        }
        .top-list {
                .list-item {
                    display: flex;
                    height: 70px;
                    line-height: 70px;
                    margin-bottom: 12px;
                    .number,
                    .name,
                    .song,
                    .time {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .number {
                        flex: 1;
                    }
                    .name {
                        flex: 5;
                        span {
                            cursor: pointer;
                            &:hover {
                                color: #3ec481;
                            }
                        }
                        .pic {
                            position: relative;
                            display: inline-block;
                            width: 70px;
                            height: 100%;
                            vertical-align: middle;
                            margin-right: 16px;
                            cursor: pointer;
                            &:hover .mask {
                                display: block;
                            }
                            .mask {
                                display: none;
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                background-color: rgba(0, 0, 0, .4);
                                &:hover .iconfont {
                                    font-size: 36px;
                                    opacity: 1;
                                }
                                .iconfont {
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    font-size: 1px;
                                    opacity: 0;
                                    color: #fff;
                                    font-weight: 700;
                                    transition: all .3s;
                                }
                            }
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .song {
                        flex: 3;
                        cursor: pointer;
                        &:hover {
                            color: #3ec481;
                        }
                    }
                    .time {
                        flex: 2;
                        color: #999;
                        
                    }
                }
        }
    }
}

.topzy {
    display: flex;
    height: 50px;
    line-height: 50px;
    background-color: #f7f7f7;
    margin-top: 20px;
    span {
        font-size: 14px;  
        color: #999;
        &:nth-child(1) {
            flex: 1;
        }
        &:nth-child(2) {
            flex: 5;
        }
        &:nth-child(3) {
            flex: 3;
        }
        &:nth-child(4) {
            flex: 2;
        }
    }
}

.l-item-current {
    background-color: #3ec481;
    color: #fff;
    &:hover {
        background-color: #3ec481!important;
        color: #fff!important;
    }
}
</style>